<template>
	<view class="detail-container">
		<uni-section title="报修信息" type="line" padding>
			<view class="form-container">
				<view class="group">
					<view class="group-label">申请人：</view>
					<view class="group-value">{{detail.userName}}</view>
				</view>
				<view class="group">
					<view class="group-label">楼栋号：</view>
					<view class="group-value">{{detail.buildingName}}</view>
				</view>
				<view class="group">
					<view class="group-label">宿舍号：</view>
					<view class="group-value">{{formatDateTime(detail.roomNo)}}</view>
				</view>
				<view class="group">
					<view class="group-label">图片：</view>
					<view class="group-value">
						<uni-file-picker readonly :value="attachList" :image-styles="imageStyles"></uni-file-picker>
					</view>
				</view>
				<view class="group">
					<view class="group-label">问题描述：</view>
					<view class="group-value">{{detail.remark}}</view>
				</view>
				<view class="group">
					<view class="group-label">申请日期：</view>
					<view class="group-value">{{formatDateTime(detail.applyTime)}}</view>
				</view>
			</view>
		</uni-section>
		<uni-section title="检修信息" type="line" padding v-if="detail.status == 1">
			<view class="form-container">
				<view class="group">
					<view class="group-label">状态：</view>
					<view class="group-value">{{getApproveStatus(detail.status).label}}</view>
				</view>
				<view class="group">
					<view class="group-label">报修项目：</view>
					<view class="group-value">{{detail.repairProject}}</view>
				</view>
				<view class="group">
					<view class="group-label">更换设备：</view>
					<view class="group-value">{{detail.replaceItem}}</view>
				</view>
				<view class="group">
					<view class="group-label">故障类型：</view>
					<view class="group-value">{{detail.faultType}}</view>
				</view>
				<view class="group">
					<view class="group-label">维修费用：</view>
					<view class="group-value">{{detail.maintenanceCost}}</view>
				</view>
				<view class="group">
					<view class="group-label">检修说明：</view>
					<view class="group-value">{{detail.serviceRemark}}</view>
				</view>
				<view class="group">
					<view class="group-label">检修时间：</view>
					<view class="group-value">{{formatDateTime(detail.serviceTime)}}</view>
				</view>
				<view class="group">
					<view class="group-label"> 附件：</view>
					<view class="group-value">
						<uni-file-picker readonly :value="serviceAttachments" :image-styles="imageStyles"></uni-file-picker>
					</view>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import {
		repairDetail
	} from "@/api/system/user"

	import {
		formatDateTime
	} from '@/utils/common.js'
	export default {
		components: {},
		data() {
			return {
				imageStyles: {
					width: 64,
					height: 64,
				},
				approveStatusList: [{
						label: '待检修',
						value: 0,
						type: 'default'
					},
					{
						label: '已检修',
						value: 1,
						type: 'info'
					},
					{
						label: '审核通过',
						value: 1,
						type: 'success'
					},
					{
						label: '已驳回',
						value: 2,
						type: 'danger'
					},
					{
						label: '已作废',
						value: 3,
						type: 'default'
					},
				],
				nodeStatusList: [{
						label: '未开始',
						value: -1,
						type: 'info'
					},
					{
						label: '待审核',
						value: 0,
						type: 'info'
					},
					{
						label: '审核通过',
						value: 1,
						type: 'success'
					},
					{
						label: '审核驳回',
						value: 2,
						type: 'danger'
					},
				],
				detail: {

				},
				attachList: [],
				serviceAttachments: [],
				list2: [],
				currentStep: 0,
			}
		},
		onLoad(options) {
			this.getInfo(options)
		},
		mounted() {

		},
		methods: {
			formatDateTime,
			getInfo(options) {
				repairDetail(options.id).then(response => {
					console.log(response.data);
					this.detail = response.data;
					this.attachList = (response.data.applyAttachments || []).map(c => {
						c.url = c.filePath;
						c.name = c.fileName;
						return c;
					})
					this.serviceAttachments = (response.data.serviceAttachments || []).map(c => {
						c.url = c.filePath;
						c.name = c.fileName;
						return c;
					})
				})
			},
			getApproveStatus(status) {
				return this.approveStatusList.filter(c => c.value == status)[0] || {};
			},
			handleRevoke() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-container {
		background-color: #fff;
		height: 100vh;

		.header {
			background-color: #fff;
			padding: 20rpx;

			&-content {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f1f1f1;
				padding-bottom: 30rpx;
				align-items: center;

				.left {
					display: flex;
					align-items: center;
				}
			}

			.image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 40rpx;
			}
		}

		.form-container {
			.group {
				margin-bottom: 15rpx;
				display: flex;

				&-label {
					padding-left: 10rpx;
					padding-right: 10rpx;
					width: 30%;
				}

				&-value {}
			}
		}
	}

	.user_for {
		display: flex;
	}

	.item_year {
		font-size: 34rpx;
		height: 50rpx;
	}

	.line_for {
		width: 4rpx;
		height: 24rpx;
		margin: 0 20rpx 10rpx;
		background-color: #559DFF;
	}

	.line_radio {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}

	.right_box {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.desc {
		font-size: 30rpx;
		color: #8e8b8d;
		display: flex;
		margin-top: 20rpx;
		align-items: center;

	}

	image {
		margin-right: 20rpx;
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
	}
</style>